'use client';

import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Tabs, Button, Divider } from 'antd';
import { motion } from 'framer-motion';
import Link from 'next/link';
import {
    ThunderboltOutlined,
    AreaChartOutlined,
    RiseOutlined,
    DashboardOutlined,
    BarChartOutlined,
    ArrowRightOutlined
} from '@ant-design/icons';

interface ProductTab {
    key: string;
    title: string;
    icon: React.ReactNode;
}

const Products: React.FC = () => {
    const { t } = useTranslation();
    const [activeTab, setActiveTab] = useState<string>('electricityPrice');

    const productTabs: ProductTab[] = [
        {
            key: 'electricityPrice',
            title: t('products.electricityPrice'),
            icon: <ThunderboltOutlined />
        },
        {
            key: 'loadForecast',
            title: t('products.loadForecast'),
            icon: <AreaChartOutlined />
        },
        {
            key: 'pvForecast',
            title: t('products.pvForecast'),
            icon: <RiseOutlined />
        },
        {
            key: 'windForecast',
            title: t('products.windForecast'),
            icon: <DashboardOutlined />
        },
        {
            key: 'biddingSpace',
            title: t('products.biddingSpace'),
            icon: <BarChartOutlined />
        }
    ];

    const productContent = {
        electricityPrice: {
            title: t('products.electricityPrice'),
            description: '通过先进的AI模型，我们提供可靠的电力市场价格预测服务，帮助能源企业优化交易策略，降低交易成本，提高盈利能力。我们的预测系统考虑了天气、负荷、历史价格走势等多种因素，确保预测结果的准确性和可靠性。',
            features: [
                '多周期电价预测，覆盖日前、周前、月前等多个时间尺度',
                '考虑天气、负荷、燃料价格等多种影响因素',
                '精确定位价格峰谷，支持分时段交易策略调整',
                '实时更新和校准预测结果',
                '丰富的可视化界面，支持多维度分析'
            ],
            caseStudy: '某大型电力用户使用我们的电价预测系统后，通过优化用电计划和交易策略，年度交易成本降低了15%以上，等效节约电费超过500万元。',
            image: '/images/products/electricity-price.jpg'
        },
        loadForecast: {
            title: t('products.loadForecast'),
            description: '精准的负荷预测是电力系统安全经济运行的基础。我们的负荷预测系统融合了多源数据和先进算法，为电网企业、电力用户提供高精度的短期、中期和长期负荷预测服务，支持电力系统调度、运行维护和规划建设。',
            features: [
                '分钟级到年级的多时间尺度负荷预测',
                '自适应学习季节性、天气敏感性和社会活动影响',
                '区域、行业和用户级的精细化预测',
                '异常事件敏感性分析',
                '电动车、空调等特殊负荷的分项预测'
            ],
            caseStudy: '某省级电网公司采用我们的负荷预测系统后，日前负荷预测平均误差降至1.5%以下，显著提升了电力调度的精确性，减少了调峰资源配置，年均节约运行成本数千万元。',
            image: '/images/products/load-forecast.jpg'
        },
        pvForecast: {
            title: t('products.pvForecast'),
            description: '随着光伏发电的大规模接入，准确的光伏发电预测成为电网稳定运行和新能源消纳的关键。我们的光伏发电预测系统整合卫星气象数据、地面观测和发电历史数据，提供全面的光伏电站发电量预测服务。',
            features: [
                '基于高精度气象数据的光照预测',
                '考虑云层动态变化的超短期光伏出力预测',
                '组件温度、灰尘沉积等影响因素的量化模型',
                '单电站及区域集群的发电预测',
                '预测不确定性分析'
            ],
            caseStudy: '某大型光伏发电企业应用我们的预测系统后，光伏发电预测精度提升40%，日内偏差电量大幅减少，年度偏差考核费用降低约300万元，同时提高了市场化交易收益。',
            image: '/images/products/pv-forecast.jpg'
        },
        windForecast: {
            title: t('products.windForecast'),
            description: '风电预测是风电场高效运行和市场化交易的重要工具。我们的风电预测系统结合中尺度气象模型和深度学习技术，为风电场提供超短期、短期和中长期的风电功率预测服务，帮助客户提高发电效益。',
            features: [
                '高分辨率地形数据支持的精细化风场模拟',
                '考虑湍流强度和尾流效应的出力预测',
                '风机故障和检修计划的智能融合',
                '功率曲线动态校准',
                '极端天气条件下的预警和风险评估'
            ],
            caseStudy: '某风电基地采用我们的风电预测系统，在复杂地形条件下实现了日前预测平均误差降至10%以内，为其精准参与电力市场交易提供了有力支持，年度增收超过700万元。',
            image: '/images/products/wind-forecast.jpg'
        },
        biddingSpace: {
            title: t('products.biddingSpace'),
            description: '电力现货市场的竞价策略对发电企业的盈利能力有着决定性影响。我们的竞价空间分析系统基于市场出清机制和竞争对手行为分析，为发电企业提供优化的报价策略建议，帮助客户在电力市场中获取竞争优势。',
            features: [
                '市场节点边际价格预测',
                '竞争对手行为模拟和分析',
                '不同市场环境下的最优报价曲线推荐',
                '风险偏好可调的策略优化',
                '多场景下的盈利分析和比较'
            ],
            caseStudy: '某大型发电集团运用我们的竞价空间分析系统，在电力现货市场试运行期间，比传统固定报价策略提升了18%的市场收益，成功规避了数次低价出清风险。',
            image: '/images/products/bidding-space.jpg'
        }
    };

    const handleTabChange = (key: string) => {
        setActiveTab(key);
    };

    // Get content for the active tab
    const activeContent = productContent[activeTab as keyof typeof productContent];

    // Animation variants
    const containerVariants = {
        hidden: { opacity: 0 },
        visible: {
            opacity: 1,
            transition: { staggerChildren: 0.1 }
        }
    };

    const itemVariants = {
        hidden: { opacity: 0, y: 20 },
        visible: {
            opacity: 1,
            y: 0,
            transition: { duration: 0.6 }
        }
    };

    return (
        <div className="min-h-screen py-20">
            <div className="container mx-auto px-4 md:px-8">
                {/* Products Header */}
                <div className="text-center mb-12">
                    <h1 className="text-4xl font-bold mb-4">我们的产品</h1>
                    <p className="text-xl text-gray-600 max-w-3xl mx-auto">
                        我们提供全面的电力行业解决方案，帮助客户实现更智能、高效的能源管理和交易
                    </p>
                </div>

                {/* Product Tabs */}
                <Tabs
                    activeKey={activeTab}
                    onChange={handleTabChange}
                    centered
                    size="large"
                    className="mb-8"
                    items={productTabs.map(tab => ({
                        key: tab.key,
                        label: <span className="px-2 py-1">{tab.icon} {tab.title}</span>
                    }))}
                />

                {/* Product Content */}
                <motion.div
                    key={activeTab}
                    initial="hidden"
                    animate="visible"
                    variants={containerVariants}
                    className="bg-white rounded-xl shadow-lg overflow-hidden"
                >
                    <div className="grid grid-cols-1 md:grid-cols-2">
                        {/* Product Image */}
                        <motion.div
                            variants={itemVariants}
                            className="bg-gradient-to-br from-blue-500 to-blue-700 flex items-center justify-center p-12"
                            style={{ minHeight: '400px' }}
                        >
                            <div className="text-white text-5xl font-bold text-center">
                                {activeContent.title}
                            </div>
                        </motion.div>

                        {/* Product Details */}
                        <div className="p-8 md:p-12">
                            <motion.h2
                                variants={itemVariants}
                                className="text-3xl font-bold mb-4"
                            >
                                {activeContent.title}
                            </motion.h2>

                            <motion.p
                                variants={itemVariants}
                                className="text-gray-600 mb-6"
                            >
                                {activeContent.description}
                            </motion.p>

                            <motion.div variants={itemVariants}>
                                <h3 className="text-xl font-bold mb-3">主要特点</h3>
                                <ul className="list-disc pl-5 mb-6 space-y-2 text-gray-700">
                                    {activeContent.features.map((feature, index) => (
                                        <motion.li
                                            key={index}
                                            variants={itemVariants}
                                        >
                                            {feature}
                                        </motion.li>
                                    ))}
                                </ul>
                            </motion.div>

                            <Divider />

                            <motion.div variants={itemVariants}>
                                <h3 className="text-xl font-bold mb-3">成功案例</h3>
                                <p className="text-gray-600 mb-6 italic">
                                    &ldquo;{activeContent.caseStudy}&rdquo;
                                </p>
                            </motion.div>

                            <motion.div
                                variants={itemVariants}
                                className="mt-6"
                            >
                                <Link href="/contact">
                                    <Button
                                        type="primary"
                                        size="large"
                                        className="bg-blue-600 hover:bg-blue-700"
                                    >
                                        了解更多 <ArrowRightOutlined />
                                    </Button>
                                </Link>
                            </motion.div>
                        </div>
                    </div>
                </motion.div>
            </div>
        </div>
    );
};

export default Products; 